<%@ page import="java.util.Map" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: micro
  Date: 4/5/2019
  Time: 5:54 AM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>
        #chartdiv{
            width: 800px;
            height:800px;
            margin:0px auto;
        }
    </style>
</head>
<body>
<div id="chartdiv">
    <h2>Top10 ip</h2>
    <canvas id="myChart">

    </canvas>
    <table class="table table-bordered" style="width: 500px">
        <thead>
        <tr>
            <td>00</td>
            <td>ip</td>
            <td>count</td>
        </tr>
        </thead>
        <c:forEach items="${rows}" var="row">
            <tr>
                <td>${row.id}</td>
                <td>${row.ipOrUrl}</td>
                <td>${row.value}</td>
            </tr>
        </c:forEach>
    </table>
</div>


<script>
    <%--var ctx = document.getElementById('myChart').getContext('2d');--%>
    <%--var labes = new Array();--%>
    <%--var i = 0;--%>
    <%--<c:forEach items="${us}" var="u">--%>
    <%--labes[i++] = '${u}';--%>
    <%--</c:forEach>--%>
    <%--var myChart = new Chart(ctx, {--%>
        <%--type: 'bar',--%>

        <%--// The data for our dataset--%>
        <%--data: {--%>
            <%--labels: labes,--%>
            <%--datasets: [{--%>
                <%--backgroundColor: 'rgb(255, 99, 132)',--%>
                <%--borderColor: 'rgb(255, 99, 132)',--%>
                <%--data: ${vs}--%>
            <%--}]--%>
        <%--},--%>
        <%--// Configuration options go here--%>
        <%--options: {--%>

        <%--}--%>
    <%--});--%>


</script>
</body>
</html>
